<template>
  <v-container fluid>
    <v-row justify="center">
      <v-col sm="4" md="4" lg="3">
        <v-card>
          <v-img src="../assets/login/background.png" class="white--text align-center" alt="注册">
            <v-card-title>Register</v-card-title>
          </v-img>
          <v-form ref="registerForm" v-model="valid" lazy-validation>
            <v-card-text>
              <v-text-field v-model="username" :rules="[usernameRules.required, usernameRules.lengthLimit, usernameRules.isLegal, usernameRules.isRepeat(usernameError)]" label="用户名" :counter="20" required>
              </v-text-field>
              <v-text-field v-model="password" :rules="passwordRules" label="密码" required :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" @click:append="show = !show" :type="show ? 'text': 'password'" :counter="20">
              </v-text-field>
              <v-text-field v-model="passwordConfirm" :rules="[passwordConfirmRules.required, passwordConfirmRules.equal(password, passwordConfirm)]" label="确认密码" required :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" @click:append="show = !show" :type="show ? 'text': 'password'" :counter="20">
              </v-text-field>
              <v-alert type="warning" dense>注册成功后会跳转到登录界面</v-alert>
              <v-btn :disabled="!valid" color="primary" class="mr-4" v-on:click="validate">注册</v-btn>
              <v-btn color="default" class="mr-4" v-on:click="reset">重置</v-btn>
            </v-card-text>
          </v-form>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Register',
  data: () => ({
    show: false,
    valid: true,
    username: '',
    usernameError: '',
    usernameRules: {
      required: v => !!v || '请输入用户名',
      lengthLimit: v => (v.length >= 2 && v.length <= 20) || '用户名应当在2-20个字符以内',
      isLegal: v => !/\W+/.test(v) || '用户名只能包含字母、数字、下划线',
      isRepeat: (usernameError) => usernameError.length === 0 || usernameError
    },
    password: '',
    passwordRules: [
      v => !!v || '请输入密码',
      v => (v.length >= 6 && v.length <= 20) || '密码应当在6-20个字符以内',
      v => /(.)*[a-zA-Z]+(.)*/.test(v) || '密码应当至少包含一个字母'
    ],
    passwordConfirm: '',
    passwordConfirmRules: {
      required: v => !!v || '请确认密码',
      equal: (password, passwordConfirm) => password === passwordConfirm || '两次密码不一致'
    }
  }),
  methods: {
    validate () {
      const valid = this.$refs.registerForm.validate()
      if (valid) {
        this.$axios.post('api/user/', {
          username: this.username,
          password: this.password
        }).then(response => {
          console.log(response)
          // 注册成功后跳转到登录页面
          this.$router.push({
            name: 'Login'
          })
        }).catch(error => {
          console.log(error)
          // 注册不成功，说明用户名已被注册
          this.usernameError = '用户名已被注册'
          // 重新验证表单
          this.$refs.registerForm.validate()
        })
      }
    },
    reset () {
      this.$refs.registerForm.reset()
    }
  },
  watch: {
    username: function () {
      // 每当用户名改变，就将用户名错误变为空
      this.usernameError = ''
    }
  }
}
</script>
